<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3_demo</title>


    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />

    <style>
      /*CSS reset*/
html {
  overflow-x: hidden;
  overflow-y: auto;
  color: #333;
  font-size: 62.5%;
  font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif, "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1";
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
  margin: 0;
  padding: 0;
}

fieldset, img {
  border: 0;
}

address, caption, cite, code, dfn, em, th, var, optgroup {
  font-style: normal;
  font-weight: 400;
}

del, ins {
  text-decoration: none;
}

li {
  list-style: none;
}

caption, th {
  text-align: left;
}

q:before, q:after {
  content: '';
}

abbr, acronym {
  border: 0;
  font-variant: normal;
}

sup {
  vertical-align: baseline;
}

sub {
  vertical-align: baseline;
}

legend {
  color: #000;
}

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
}

input, button, textarea, select {
  outline: none;
  *font-size: 100%;
}

textarea {
  resize: none;
}

a {
  outline: 0;
  text-decoration: none;
}

a:hover {
  outline: 0;
  text-decoration: none;
}

.clearfix, .cf {
  zoom: 1;
}

.clearfix:after, .cf:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

* {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
}

.container {
  width: 100%;
}

.demo-cube {
  position: absolute;
  width: 100%;
  height: 200px;
  background-color: #efefef;
  zoom: 2;
}

.demo-cube .cones-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 30%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateY(35deg);
  transform: rotateY(35deg);
  -webkit-animation: slowRotate 6s ease-in-out infinite 2s;
  animation: slowRotate 6s ease-in-out infinite 2s;
}

.demo-cube .cones-inner > li {
  position: absolute;
  top: 0;
  z-index: 10;
  border-left: 28.8675px solid transparent;
  border-right: 28.8675px solid transparent;
}

.demo-cube .cones-inner .front {
  border-bottom: 50px solid rgba(80, 80, 80, 0.7);
  -webkit-transform: rotate3d(-1, 1.732, 0, 70.5deg);
  transform: rotate3d(-1, 1.732, 0, 70.5deg);
  -webkit-transform-origin: 25% 50%;
  transform-origin: 25% 50%;
}

.demo-cube .cones-inner .left {
  border-bottom: 50px solid rgba(120, 120, 120, 0.7);
  -webkit-transform: rotate3d(1, 1.732, 0, -70.5deg);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
  -webkit-transform-origin: 75% 50%;
  transform-origin: 75% 50%;
}

.demo-cube .cones-inner .right {
  border-bottom: 50px solid rgba(160, 160, 160, 0.7);
  -webkit-transform: rotate3d(1, 0, 0, 70.5deg);
  transform: rotate3d(1, 0, 0, 70.5deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.demo-cube .cones-inner .bottom {
  border-bottom: 50px solid rgba(200, 200, 200, 0.7);
}

.demo-cube .cube-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
  transform: rotateX(-33.5deg) rotateY(45deg);
  -webkit-animation: fastspin 6s ease-in-out infinite 2s;
  animation: fastspin 6s ease-in-out infinite 2s;
}

.demo-cube .cube-inner > li {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  background: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.3) 100%);
}

.demo-cube .cube-inner > li:before {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.demo-cube .cube-inner .top {
  -webkit-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}

.demo-cube .cube-inner .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(25px);
  transform: rotateX(-90deg) translateZ(25px);
}

.demo-cube .cube-inner .front {
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
}

.demo-cube .cube-inner .back {
  -webkit-transform: rotateX(-180deg) translateZ(25px);
  transform: rotateX(-180deg) translateZ(25px);
}

.demo-cube .cube-inner .left {
  -webkit-transform: rotateY(-90deg) translateZ(25px);
  transform: rotateY(-90deg) translateZ(25px);
}

.demo-cube .cube-inner .right {
  -webkit-transform: rotateY(90deg) translateZ(25px);
  transform: rotateY(90deg) translateZ(25px);
}

.demo-cube .sphere-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 70%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateX(-15deg) rotateY(70deg);
  transform: rotateX(-15deg) rotateY(70deg);
  -webkit-animation: ballRotate 6s linear infinite 2s;
  animation: ballRotate 6s linear infinite 2s;
}

.demo-cube .sphere-inner > li {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background: radial-gradient(transparent 30%, rgba(0, 0, 0, 0.3) 100%);
}

.demo-cube .sphere-inner .a {
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}

.demo-cube .sphere-inner .b {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

.demo-cube .sphere-inner .c {
  -webkit-transform: rotateY(225deg);
  transform: rotateY(225deg);
}

.demo-cube .sphere-inner .c {
  -webkit-transform: rotateY(315deg);
  transform: rotateY(315deg);
}

.demo-perspective-photo {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 200px;
  background-color: #fff;
  zoom: 2;
}

.demo-perspective-photo #stage {
  width: 100%;
  height: 200px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  -webkit-transition: top 0.5s;
  -moz-transition: top 0.5s;
  transition: top 0.5s;
  position: relative;
}

.demo-perspective-photo #container {
  position: absolute;
  width: 64px;
  height: 36px;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -18px;
  cursor: pointer;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: photoRotate 18s ease-in-out infinite 2s;
  animation: photoRotate 18s ease-in-out infinite 2s;
}

.demo-perspective-photo .piece {
  width: 128px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -moz-transition: opacity 1s, -moz-transform 1s;
  transition: opacity 1s, transform 1s;
  position: absolute;
  bottom: 0;
}

.demo-perspective-photo .example {
  width: 64px;
  height: 36px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -moz-transition: opacity 1s, -moz-transform 1s;
  transition: opacity 1s, transform 1s;
  position: absolute;
  bottom: 0;
}

.demo-perspective-photo .example:nth-child(1) {
  -webkit-transform: rotateY(0deg) translateZ(98px);
  transform: rotateY(0deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(2) {
  -webkit-transform: rotateY(60deg) translateZ(98px);
  transform: rotateY(60deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(3) {
  -webkit-transform: rotateY(120deg) translateZ(98px);
  transform: rotateY(120deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(4) {
  -webkit-transform: rotateY(180deg) translateZ(98px);
  transform: rotateY(180deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(5) {
  -webkit-transform: rotateY(240deg) translateZ(98px);
  transform: rotateY(240deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-perspective-photo .example:nth-child(6) {
  -webkit-transform: rotateY(300deg) translateZ(98px);
  transform: rotateY(300deg) translateZ(98px);
  background-color: rgba(153, 204, 204, 0.8);
}

.demo-music {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 400px;
  background-color: #efefef;
  zoom: 2;
}

.demo-music .music {
  width: 80px;
  height: 50px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-40px, -25px);
  transform: translate(-40px, -25px);
  position: absolute;
}

.demo-music #waves {
  width: 80px;
  height: 50px;
  position: absolute;
  top: 12px;
  left: 12px;
}

.demo-music #waves li {
  position: relative;
  float: left;
  height: 100%;
  width: 12%;
  overflow: hidden;
  margin-right: 1px;
}

.demo-music #waves li span {
  position: absolute;
  bottom: 0;
  display: block;
  height: 100%;
  width: 100px;
  background: radial-gradient(transparent 50%, rgba(255, 162, 162, 0.9) 100%);
}

.demo-music #waves .li1 span {
  animation: waves 0.6s linear 0s infinite alternate;
  -webkit-animation: waves 0.6s linear 0s infinite alternate;
}

.demo-music #waves .li2 span {
  animation: waves 0.9s linear 0s infinite alternate;
  -webkit-animation: waves 0.9s linear 0s infinite alternate;
}

.demo-music #waves .li3 span {
  animation: waves 1s linear 0s infinite alternate;
  -webkit-animation: waves 1s linear 0s infinite alternate;
}

.demo-music #waves .li4 span {
  animation: waves 0.8s linear 0s infinite alternate;
  -webkit-animation: waves 0.8s linear 0s infinite alternate;
}

.demo-music #waves .li5 span {
  animation: waves 0.7s linear 0s infinite alternate;
  -webkit-animation: waves 0.7s linear 0s infinite alternate;
}

.demo-music #waves .li6 span {
  animation: waves 0.5s linear 0s infinite alternate;
  -webkit-animation: waves 0.5s linear 0s infinite alternate;
}

.demo-loading {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 600px;
  background-color: #fff;
  zoom: 2;
}

.demo-loading .demo6 {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 30%;
  -webkit-transform: translate(-12.5px, -12.5px);
  transform: translate(-12.5px, -12.5px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.demo-loading .demo6-x {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  border: 2px solid #2196F3;
  border-top-color: transparent;
  border-bottom-color: transparent;
  -webkit-animation: "aniSix-x" 1s ease-in-out 0.2s infinite;
  animation: "aniSix-x" 1s ease-in-out 0.2s infinite;
}

.demo-loading .demo6-y {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: #2196F3;
  -webkit-animation: "aniSix-y" 1s ease-in-out 0.2s infinite;
  animation: "aniSix-y" 1s ease-in-out 0.2s infinite;
}

.demo-loading .demo8 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  -webkit-transform: translate(-12.5px, -12.5px);
  transform: translate(-12.5px, -12.5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-loading .demo8-x {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.9) 100%);
  -webkit-animation: "aniTwo" 1s ease 0s infinite;
  animation: "aniTwo" 1s ease 0s infinite;
}

.demo-loading .demo8-y {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 23px;
  height: 23px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.8) 100%);
  -webkit-animation: "aniTwo" 1s ease 0.2s infinite;
  animation: "aniTwo" 1s ease 0.2s infinite;
}

.demo-loading .demo8-z {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.7) 100%);
  -webkit-animation: "aniTwo" 1s ease 0.3s infinite;
  animation: "aniTwo" 1s ease 0.3s infinite;
}

.demo-loading .demo8-m {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: radial-gradient(transparent 10%, rgba(33, 150, 243, 0.6) 100%);
  -webkit-animation: "aniTwo" 1s ease 0.4s infinite;
  animation: "aniTwo" 1s ease 0.4s infinite;
}

.demo-loading .demo10 {
  position: absolute;
  top: 50%;
  left: 70%;
  -webkit-transform: translate(-22.5px, -22.5px);
  transform: translate(-22.5px, -22.5px);
  width: 45px !important;
  height: 45px !important;
  padding-top: 10px;
}

.demo-loading .demo10 > div {
  width: 10px;
  height: 10px;
  margin-left: 5px;
  margin-bottom: 5px;
  border-radius: 100%;
  background-color: #2196F3;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  float: left;
}

.demo-loading .demo10-a, .demo-loading .demo10-f, .demo-loading .demo10-h {
  -webkit-animation: "aniTen-e" 1s linear 0s infinite;
  animation: "aniTen-e" 1s linear 0s infinite;
}

.demo-loading .demo10-b, .demo-loading .demo10-d, .demo-loading .demo10-i {
  -webkit-animation: "aniTen-e" 1s linear 0.15s infinite;
  animation: "aniTen-e" 1s linear 0.15s infinite;
}

.demo-loading .demo10-c, .demo-loading .demo10-e, .demo-loading .demo10-g {
  -webkit-animation: "aniTen-e" 1s linear 0.3s infinite;
  animation: "aniTen-e" 1s linear 0.3s infinite;
}

@-webkit-keyframes slowRotate {
  0% {
    -webkit-transform: rotateY(35deg);
    transform: rotateY(35deg);
  }
  40%, to {
    -webkit-transform: rotateY(-315deg);
    transform: rotateY(-315deg);
  }
}

@keyframes slowRotate {
  0% {
    -webkit-transform: rotateY(35deg);
    transform: rotateY(35deg);
  }
  100% {
    -webkit-transform: rotateY(395deg);
    transform: rotateY(395deg);
  }
}

@-webkit-keyframes fastspin {
  0% {
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  40%, to {
    -webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

@keyframes fastspin {
  0% {
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
  }
  40%, to {
    -webkit-transform: rotateX(-33.5deg) rotateY(-315deg);
    transform: rotateX(-33.5deg) rotateY(-315deg);
  }
}

@-webkit-keyframes ballRotate {
  0% {
    -webkit-transform: rotateX(-15deg) rotateY(70deg);
    transform: rotateX(-15deg) rotateY(70deg);
  }
  100% {
    -webkit-transform: rotateX(-15deg) rotateY(430deg);
    transform: rotateX(-15deg) rotateY(430deg);
  }
}

@keyframes ballRotate {
  0% {
    -webkit-transform: rotateX(-15deg) rotateY(70deg);
    transform: rotateX(-15deg) rotateY(70deg);
  }
  100% {
    -webkit-transform: rotateX(-15deg) rotateY(430deg);
    transform: rotateX(-15deg) rotateY(430deg);
  }
}

@-webkit-keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  16.7% {
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
  }
  33.3% {
    -webkit-transform: rotateY(120deg);
    transform: rotateY(120deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  66.7% {
    -webkit-transform: rotateY(240deg);
    transform: rotateY(240deg);
  }
  83.3% {
    -webkit-transform: rotateY(300deg);
    transform: rotateY(300deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@keyframes photoRotate {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  16.7% {
    -webkit-transform: rotateY(60deg);
    transform: rotateY(60deg);
  }
  33.3% {
    -webkit-transform: rotateY(120deg);
    transform: rotateY(120deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  66.7% {
    -webkit-transform: rotateY(240deg);
    transform: rotateY(240deg);
  }
  83.3% {
    -webkit-transform: rotateY(300deg);
    transform: rotateY(300deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

@-webkit-keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}

@keyframes waves {
  10% {
    height: 20%;
  }
  20% {
    height: 60%;
  }
  40% {
    height: 40%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 50%;
  }
}

@-webkit-keyframes aniSix-x {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes aniSix-x {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes aniSix-y {
  0% {
    -webkit-transform: scale(0.1);
  }
  50% {
    -webkit-transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.1);
  }
}

@keyframes aniSix-y {
  0% {
    transform: scale(0.1);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.1);
  }
}

@-webkit-keyframes aniTwo {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.2);
    opacity: 0.2;
  }
}

@keyframes aniTwo {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
    opacity: 0.2;
  }
}

@-webkit-keyframes aniTen-e {
  0% {
    opacity: 0.1;
    -webkit-transform: scale(1.2);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(0.4);
  }
}

@keyframes aniTen-e {
  0% {
    opacity: 0.1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(0.4);
  }
}

.demo-cube-test {
  position: absolute;
  width: 100%;
  height: 200px;
  top: 800px;
  background-color: #fff;
  zoom: 2;
}

.demo-cube-test .cube-inner {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 25px 25px;
  transform-origin: 25px 25px;
  -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
  transform: rotateX(-33.5deg) rotateY(45deg);
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-perspective: 100px;
  perspective: 100px;
}

.demo-cube-test .cube-inner > li {
  position: absolute;
  display: block;
  width: 50px;
  height: 50px;
  float: left;
}

.demo-cube-test .cube-inner > li:before {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.demo-cube-test .cube-inner .top {
  background-color: rgba(255, 0, 0, 0.8);
  -webkit-transform: rotateX(90deg) translateZ(25px);
  transform: rotateX(90deg) translateZ(25px);
}

.demo-cube-test .cube-inner .bottom {
  background-color: rgba(255, 255, 0, 0.8);
  -webkit-transform: rotateX(-90deg) translateZ(25px);
  transform: rotateX(-90deg) translateZ(25px);
}

.demo-cube-test .cube-inner .front {
  background-color: rgba(0, 128, 0, 0.8);
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
}

.demo-cube-test .cube-inner .back {
  background-color: rgba(255, 152, 0, 0.8);
  -webkit-transform: rotateX(-180deg) translateZ(25px);
  transform: rotateX(-180deg) translateZ(25px);
}

.demo-cube-test .cube-inner .left {
  background-color: rgba(103, 58, 183, 0.8);
  -webkit-transform: rotateY(-90deg) translateZ(25px);
  transform: rotateY(-90deg) translateZ(25px);
}

.demo-cube-test .cube-inner .right {
  background-color: rgba(33, 150, 243, 0.8);
  -webkit-transform: rotateY(90deg) translateZ(25px);
  transform: rotateY(90deg) translateZ(25px);
}
    </style>
</head>
<body>
  <div class="container">
    <a style="width:149px;height:149px;position:fixed;top:0;right:0;z-index:9999;" href="https://github.com/chokcoco/css3-" target="_blank">
      <img src="http://chokcoco.github.io/demo/curveJS/images/forkme.png">
    </a>
    <!-- 立方体 -->
    <div class="demo-cube">
      <ul class="cube-inner">
        <li class="top"></li>
        <li class="bottom"></li>
        <li class="front"></li>
        <li class="back"></li>
        <li class="right"></li>
        <li class="left"></li>
      </ul>

      <!-- 正四面体 -->
      <ul class="cones-inner">
        <li class="bottom"></li>
        <li class="front"></li>
        <li class="right"></li>
        <li class="left"></li>
      </ul>

      <!-- 球体 -->
      <ul class="sphere-inner">
        <li class="a"></li>
        <li class="b"></li>
        <li class="c"></li>
        <li class="d"></li>
      </ul>
    </div>


    <!-- 3d照片墙 -->
    <div class="demo-perspective-photo">
      <div id="stage">
        <div id="container">
          <!-- 此处可上传自己的图片 -->
          <!--        <img src="../static/images/1.png" class='piece' style="-webkit-transform: rotateY(0deg) translateZ(196px);">
          <img src="../static/images/2.png" class='piece' style="-webkit-transform: rotateY(60deg) translateZ(196px);">
          <img src="../static/images/3.png" class='piece' style="-webkit-transform: rotateY(120deg) translateZ(196px);">
          <img src="../static/images/1.png" class='piece' style="-webkit-transform: rotateY(180deg) translateZ(196px);">
          <img src="../static/images/2.png" class='piece' style="-webkit-transform: rotateY(240deg) translateZ(196px);">
          <img src="../static/images/4.png" class='piece' style="-webkit-transform: rotateY(300deg) translateZ(196px);">
          -->
          <!-- 此处使用div代替 -->
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
          <div class='example' style=""></div>
        </div>
      </div>
    </div>

    <!-- music-->
    <div class="demo-music">
      <div class='music'>
        <ul id="waves" class="movement">
          <li class="li1"><span class='ani-li'></span></li>
          <li class="li2"><span class='ani-li'></span></li>
          <li class="li3"><span class='ani-li'></span></li>
          <li class="li4"><span class='ani-li'></span></li>
          <li class="li5"><span class='ani-li'></span></li>
          <li class="li6"><span class='ani-li'></span></li>
        </ul>
        <div class='music-state'></div>
      </div>
    </div>

    <!-- loading加载效果-->
    <div class="demo-loading">
      <div class='demo6'>
        <div class='demo6-x'>
          <div class='demo6-y'></div>
        </div>
      </div>

      <div class='demo8'>
        <div class='demo8-x'></div>
        <div class='demo8-y'></div>
        <div class='demo8-z'></div>
        <div class='demo8-m'></div>
      </div>

      <div class='demo10'>
        <div class='demo10-a'></div>
        <div class='demo10-b'></div>
        <div class='demo10-c'></div>
        <div class='demo10-d'></div>
        <div class='demo10-e'></div>
        <div class='demo10-f'></div>
        <div class='demo10-g'></div>
        <div class='demo10-h'></div>
        <div class='demo10-i'></div>
      </div>
    </div>

    <!--test-->
<!--     <div class="demo-cube-test">
      <ul class="cube-inner">
        <li class="top"></li>
        <li class="bottom"></li>
        <li class="front"></li>
        <li class="back"></li>
        <li class="right"></li>
        <li class="left"></li>
      </ul>
    </div> -->
  </div>
</html>